<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom: 5px;font-size: 0px">
      <div class="con-container">
        <div class="lab-container">
          <label class="condition-item-title">系统标识</label>
          <el-form-item label="" prop="appClient" class="custom-el-form-item">
            <el-input
              v-model="queryParams.appClient" class="query-param"
              placeholder="请输入系统标识"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </div>

        <div class="btn-container">
          <el-form-item>
            <el-button type="primary" icon="el-icon-setting" size="mini" @click="conditionToggle">高级查询
            </el-button>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                       v-hasPermi="['place:workOrder:add']">新增
            </el-button>
            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                       v-hasPermi="['place:workOrder:export']">导出
            </el-button>
          </el-form-item>
        </div>
      </div>

      <div class="toggle-container" ref="toggle-container" style="display: none;">
        <div class="condition-item">
          <label class="condition-item-title">应用系统ID</label>
          <el-form-item label="" prop="appMsgId">
            <el-input
              v-model="queryParams.appMsgId" class="query-param"
              placeholder="请输入应用系统ID"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </div>
        <div class="condition-item">
          <label class="condition-item-title">流程ID</label>
          <el-form-item label="" prop="instanceId">
            <el-input
              v-model="queryParams.instanceId" class="query-param"
              placeholder="请输入流程ID"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </div>
        <div class="condition-item">
          <label class="condition-item-title">发送人账号</label>
          <el-form-item label="" prop="sender">
            <el-input
              v-model="queryParams.sender" class="query-param"
              placeholder="请输入发送人账号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </div>
        <div class="condition-item">
          <label class="condition-item-title">发送人姓名</label>
          <el-form-item label="" prop="senderName">
            <el-input
              v-model="queryParams.senderName" class="query-param"
              placeholder="请输入发送人姓名"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </div>
        <div class="condition-item">
          <label class="condition-item-title">接收人账号</label>
          <el-form-item label="" prop="receiver">
            <el-input
              v-model="queryParams.receiver" class="query-param"
              placeholder="请输入接收人账号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </div>
        <div class="condition-item">
          <label class="condition-item-title">接收人姓名</label>
          <el-form-item label="" prop="receiverName">
            <el-input
              v-model="queryParams.receiverName" class="query-param"
              placeholder="请输入接收人姓名"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </div>
        <div class="condition-item">
          <label class="condition-item-title">流程名称</label>
          <el-form-item label="" prop="docType">
            <el-input
              v-model="queryParams.docType" class="query-param"
              placeholder="请输入流程名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </div>
        <div class="condition-item">
          <label class="condition-item-title">环节名称</label>
          <el-form-item label="" prop="msgStatus">
            <el-input
              v-model="queryParams.msgStatus" class="query-param"
              placeholder="请输入环节名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </div>
        <div class="condition-item">
          <label class="condition-item-title">紧急程度</label>
          <el-form-item label="" prop="urgentLevel">
            <el-input
              v-model="queryParams.urgentLevel" class="query-param"
              placeholder="请输入紧急程度"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </div>
        <div class="condition-item">
          <label class="condition-item-title">是否置顶</label>
          <el-form-item label="" prop="stick">
            <el-select v-model="queryParams.stick" placeholder="请输入是否置顶" class="query-param">
              <el-option
                v-for="dict in isOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="condition-item">
          <label class="condition-item-title">是否在Moa配置</label>
          <el-form-item label="" prop="moaConfig">
            <el-input
              v-model="queryParams.moaConfig" class="query-param"
              placeholder="请输入是否在Moa配置"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </div>
        <div class="condition-item">
          <label class="condition-item-title">工单接收时间</label>
          <el-form-item label="" prop="receiveTime">
            <el-date-picker clearable size="small" style="width: 240px;"
                            v-model="queryParams.receiveTimeRange"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            placeholder="选择工单接收时间">
            </el-date-picker>
          </el-form-item>
        </div>
      </div>
    </el-form>

    <el-table ref="table" v-loading="loading" @sort-change="changeTableSort" stripe @row-dblclick="handleDoubleClick"
              :height="tableHeight" :header-cell-style="{fontSize:'14px', fontWeight:'500'}"
              :data="workOrderList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="序号" type="index" width="60" align="left">
        <template slot-scope="scope">
          <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工单标题" align="left" prop="msgTitle" :render-header="renderHeader"/>
      <el-table-column label="所属系统" align="left" prop="appName" :render-header="renderHeader"/>
      <el-table-column label="流程名称" align="left" prop="docType"  :render-header="renderHeader"/>
      <el-table-column label="环节名称" align="left" prop="msgStatus"  :render-header="renderHeader"/>
      <el-table-column label="紧急程度" align="left" prop="urgentLevel"  :render-header="renderHeader"/>
      <el-table-column label="发送人姓名" align="left" prop="senderName"  :render-header="renderHeader"/>
      <el-table-column label="接收人姓名" align="left" prop="receiverName"  :render-header="renderHeader"/>
      <el-table-column label="是否置顶" align="left" prop="stick"  :render-header="renderHeader">
        <template slot-scope="scope">
          {{ isFormat(scope.row.stick) }}
        </template>
      </el-table-column>
      <el-table-column label="是否在Moa配置" align="left" prop="moaConfig"
                       :render-header="renderHeader"/>
      <el-table-column label="工单接收时间" align="left" prop="receiveTime" width="150" sortable
                       :render-header="renderHeader">
        <template slot-scope="scope">
          <span>{{ scope.row.receiveTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row)"
            v-hasPermi="['place:workOrder:query']"
          >详情
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['place:workOrder:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['place:workOrder:remove']"
          >删除
          </el-button>
          <el-button
            v-if="msgType === '0'"
            size="mini"
            type="text"
            icon="el-icon-position"
            @click="dealOrder(scope.row)"
          >处理
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      :page-sizes="pageList"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 新增或修改任务工单对话框 -->
    <el-dialog :visible.sync="open" :close-on-click-modal="false" class="customForm _baseForm_big" @opened="openDialog">
      <div slot="title">
        <span><i :class="dialogIcon"></i></span>
        <span> {{ title }}</span>
      </div>
      <div class="workOrder-body"></div>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <div class="sub-project">
          <div class="sub-title">
            <div class="sub-title-name">基本信息</div>
          </div>
          <div class="sub-body">
            <el-row>
              <el-col :span="12">
                <el-form-item label="系统标识" prop="appClient" v-if="!readOnly">
                  <el-input v-model="form.appClient" placeholder="请输入系统标识"/>
                </el-form-item>
                <el-form-item label="系统标识：" prop="appClient" v-if="readOnly" class="custom-form-item">
                  {{ form.appClient }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="流程ID" prop="instanceId" v-if="!readOnly">
                  <el-input v-model="form.instanceId" placeholder="请输入流程ID"/>
                </el-form-item>
                <el-form-item label="流程ID：" prop="instanceId" v-if="readOnly" class="custom-form-item">
                  {{ form.instanceId }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发送人账号" prop="sender" v-if="!readOnly">
                  <el-input v-model="form.sender" placeholder="请输入发送人账号"/>
                </el-form-item>
                <el-form-item label="发送人账号：" prop="sender" v-if="readOnly" class="custom-form-item">
                  {{ form.sender }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发送人姓名" prop="senderName" v-if="!readOnly">
                  <el-input v-model="form.senderName" placeholder="请输入发送人姓名"/>
                </el-form-item>
                <el-form-item label="发送人姓名：" prop="senderName" v-if="readOnly" class="custom-form-item">
                  {{ form.senderName }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="接收人账号" prop="receiver" v-if="!readOnly">
                  <el-input v-model="form.receiver" placeholder="请输入接收人账号"/>
                </el-form-item>
                <el-form-item label="接收人账号：" prop="receiver" v-if="readOnly" class="custom-form-item">
                  {{ form.receiver }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="接收人姓名" prop="receiverName" v-if="!readOnly">
                  <el-input v-model="form.receiverName" placeholder="请输入接收人姓名"/>
                </el-form-item>
                <el-form-item label="接收人姓名：" prop="receiverName" v-if="readOnly" class="custom-form-item">
                  {{ form.receiverName }}
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="工单标题" prop="msgTitle" v-if="!readOnly">
                  <el-input v-model="form.msgTitle" type="textarea" :autosize="{ minRows: 3, maxRows: 10}"
                            placeholder="请输入工单标题"/>
                </el-form-item>
                <el-form-item label="工单标题：" prop="msgTitle" v-if="readOnly" class="custom-form-item">
                  <el-input v-model="form.msgTitle" type="textarea" :autosize="true" placeholder=""
                            :readonly="readOnly" resize="none" class="custom-textarea custom-form-item"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="流程名称" prop="docType" v-if="!readOnly">
                  <el-input v-model="form.docType"  placeholder="请输入流程名称"/>
                </el-form-item>
                <el-form-item label="流程名称：" prop="docType" v-if="readOnly" class="custom-form-item">
                  {{ form.docType }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="环节名称" prop="msgStatus" v-if="!readOnly">
                  <el-input v-model="form.msgStatus"
                            placeholder="请输入环节名称"/>
                </el-form-item>
                <el-form-item label="环节名称：" prop="msgStatus" v-if="readOnly" class="custom-form-item">
                  {{ form.msgStatus }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="pc待办跳转链接" prop="msgUrl" v-if="!readOnly">
                  <el-input v-model="form.msgUrl" placeholder="请输入pc待办跳转链接"/>
                </el-form-item>
                <el-form-item label="pc待办跳转链接：" prop="msgUrl" v-if="readOnly" class="custom-form-item">
                  {{ form.msgUrl }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="流程跟踪地址链接" prop="processUrl" v-if="!readOnly">
                  <el-input v-model="form.processUrl" placeholder="请输入流程跟踪地址链接"/>
                </el-form-item>
                <el-form-item label="流程跟踪地址链接：" prop="processUrl" v-if="readOnly" class="custom-form-item">
                  {{ form.processUrl }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="紧急程度" prop="urgentLevel" v-if="!readOnly">
                  <el-input v-model="form.urgentLevel" placeholder="请输入紧急程度"/>
                </el-form-item>
                <el-form-item label="紧急程度：" prop="urgentLevel" v-if="readOnly" class="custom-form-item">
                  {{ form.urgentLevel }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否置顶" prop="stick" v-if="!readOnly">
                  <el-select v-model="form.stick" placeholder="请选择是否置顶" class="customSelect form-item">
                    <el-option
                      v-for="dict in isOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="是否置顶" prop="stick" v-if="readOnly" class="custom-form-item">
                  {{ isFormat(form.stick) }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否在Moa配置" prop="moaConfig" v-if="!readOnly">
                  <el-input v-model="form.moaConfig" placeholder="请选择是否在Moa配置 yes 是  no 否"/>
                </el-form-item>
                <el-form-item label="是否在Moa配置" prop="moaConfig" v-if="readOnly" class="custom-form-item">
                  {{ form.moaConfig }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="moa打开地址" prop="moaLink" v-if="!readOnly">
                  <el-input v-model="form.moaLink" placeholder="请输入moa打开地址"/>
                </el-form-item>
                <el-form-item label="moa打开地址：" prop="moaLink" v-if="readOnly" class="custom-form-item">
                  {{ form.moaLink }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工单接收时间" prop="receiveTime" v-if="!readOnly">
                  <el-date-picker clearable size="small" class="form-item"
                                  v-model="form.receiveTime"
                                  type="datetime"
                                  value-format="yyyy-MM-dd HH:mm:ss"
                                  placeholder="选择工单接收时间">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="工单接收时间：" prop="receiveTime" v-if="readOnly" class="custom-form-item">
                  {{ form.receiveTime }}
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div v-if="operationType != 3">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
        <div v-if="operationType == 3">
          <el-button type="primary" @click="cancel">关 闭</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import workOrder from "./workOrder";

export default {
  ...workOrder
}
</script>
<style scoped>
.form-item {
  width: 100%;
}
</style>
